<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/caidanlan.css">
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="../javaScript/data_management.js"></script>
    <script src="../javaScript/utl.js"></script>
    <script src="../javaScript/quanxianpanduan.js"></script>

    <style>
        .dropdown {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding: 0 20px;
        }

        .tableStyle {
            margin-top: 20px;
            padding: 0 20px;
        }

        #myAlert {
            position: fixed;
            width: 50%;
            left: 25%;
            z-index: 2;
            top: 1%;
        }
    </style>
</head>


<body>
    <div class="container-fulid">
        <div class="row shouhang">
            <span class="iconfont icon-ziliaoku"></span>
            <p>图书馆后台管理系统</p>
            <div id='yonghu'>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 caidan qingneibian">
                <a href="../html/jueseguanli.html">
                    <p> 角色管理</p>
                </a>
                <a href="../html/guanliyuanguanli.html">
                    <p>管理员管理</p>
                </a>
                <a href="./quanxianguanli.html">
                    <p>权限管理</p>
                </a>
                <a href="../html/ReaderUser.html">
                    <p>读者用户</p>
                </a>
                <a href="../html/duzhejuese.html">
                    <p>读者角色</p>
                </a>
                <a href="../html/yuedu.html">
                    <p>借阅查询</p>
                </a>
                <a href="../html/jieyueguanli.html">
                    <p>借阅管理</p>
                </a>
                <a href="../html/book-management.html">
                    <p>书刊管理</p>
                </a>
                <a href="../html/guancangdizhi.html">
                    <p>馆藏地址管理</p>
                </a>
                <a href="../html/guancangfenlei.html">
                    <p>馆藏分类管理</p>
                </a>
                <a href="../html/cengjiaLabel.html">
                    <p>层架标签配置</p>
                </a>
                <a href="../html/fenguanshezhi.html">
                    <p>分馆配置</p>
                </a>
                <a href="../html/book_inventory.html">
                    <p>图书盘点</p>
                </a>
                <a href="../html/dindanguanli.html">
                    <p>订单管理</p>
                </a>
                <a href="../html/tushuguanshezi.html">
                    <p>图书馆设置</p>
                </a>
            </div>
            <div class="col-md-10 qingneibian" id="shuju">
                <div style="padding-top: 35px;padding-left: 3%;"> 首页 <span style="margin: 0 1px;">></span> 角色管理</div>
                <div id="modal-header">

                </div>
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" onclick="addOrUpdate(1)">
                        <span class=" glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入查询的内容" aria-describedby="basic-addon2">
                        <span class="input-group-addon" id="basic-addon2">搜索</span>
                    </div>

                </div>
                <div class="tableStyle">
                    <div>
                        <table class="table">
                            <thead>
                                <tr id="tableThBox">
                                </tr>
                            </thead>
                            <tbody id="tableTrBox">
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--modal-->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span>
                                </button>
                                <div id="exampleModalLabel"></div>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">*角色名称:</label>
                                        <input type="text" class="form-control" id="recipient-name">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">角色说明:</label>
                                        <textarea class="form-control" id="message-text"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">状态:</label>
                                        <label>
                                            <input type="radio" name="1" value="启用" class="formInput" checked="true">开启
                                        </label>
                                        <label>
                                            <input id="3" type="radio" name="1" value="禁用" class="formInput">关闭
                                        </label>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal"
                                    onclick="reset()">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="submit()">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</body>
<script>
    let guanliname = glqx('角色管理')
    let title = ''
    let type = ''
    let updateId = ''
    let header = ['角色名', '角色说明', '创建时间', "状态", '操作']
    let data = [{
        role: "张三",
        roleRemark: "张三说明",
        createTime: "2021-12-13",
        state: '启用',
        id: 1
    }, {
        role: "里斯",
        roleRemark: "里斯说明",
        createTime: "2021-12-13",
        state: '启用',
        id: 2
    }, {
        role: "王五",
        roleRemark: "王五说明",
        createTime: "2021-12-13",
        state: '启用',
        id: 3
    }, {
        role: "赵六",
        roleRemark: "赵六说明",
        createTime: "2021-12-13",
        state: '启用',
        id: 4
    },]

    //  渲染表单头部方法
    function tableThBox() {
        let thHtml = ''
        header.forEach(item => {
            thHtml += `<th>${item}</th>`
            // /*  确定按钮 */
            // $("#queding").click(function() {
            //             let name = $('#wenbenyi').val()
            //             let shuoming = $('#wenbener').val()
            //             let zhuangtai
            //             if ($('.zitigao ').children().children().eq(0).prop('checked')) {
            //                 zhuangtai = $('.zitigao ').children().eq(0).text()
            //             } else {
            //                 zhuangtai = $('.zitigao ').children().eq(1).text()
            //             }
            //             $("#shuju").append(`
            //                 <div  class="row" style="padding-top: 20px;padding-left: 5%; ">
            //                     <div class="col-md-1 ">cjgly001</div>
            //                     <div class="col-md-2">后台总管理员管理员</div>
            //                     <div class="col-md-1">${shuoming}</div>
            //                     <div class="col-md-1">${name}</div>
            //                     <div class="col-md-2">134-0098-0000</div>
            //                     <div class="col-md-2">${zhuangtai}</div>
            //                     <div class="col-md-2" style=" transform: translateX(-15%)">
            //                         <span class="xiaoshou" onclick="bianji()" style="width:45px ;height:21px ; text-align: center; background-color: rgb(253,189,4); display: inline-block;">编辑</span>
            //                         <span class="xiaoshou" onclick="tishi()" style="  width:45px ;height:21px ; text-align: center; background-color: red; display: inline-block;">删除</span>
            //                     </div>
            //                 </div> 
            //             `)
            //             $("#beijing").css({
            //                 display: "none"
            //             })
            //             $("#zhezhao").css({
            //                 display: "none" 

            //             })
            //             
            //         })
            //     })
        })
        return thHtml
    }

    //渲染表单主体方法
    function tableTrBox() {
        let trHtml = ''
        data.forEach((item, index) => {
            trHtml += `<tr>
            <td>${item.role}</td>
            <td>${item.roleRemark}</td>
            <td>${item.createTime}</td>
            <td>${item.state}</td>

            <td style="width: 20%">
                <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" onclick="addOrUpdate(${2},${index},${item.id})">编辑</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button"  onclick="dele(${item.id})"  class="btn btn-default">删除</button>
                </div>
            </td>
            </tr>`
        })
        return trHtml
    }

    isLogin()
    yonghu()



    //方法
    //删除
    function dele(id) {
        if (czqx(guanliname, '删除')) {
            return
        }

        for (let i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                $('#tableTrBox').children().eq(i).remove()
                data.splice(i, 1)
            }
        }
    }

    function addOrUpdate(num, index, id) {
        if (czqx(guanliname, '新增')) {
            return
        }
        type = num
        title = num === 1 ? "新增角色" : "编辑角色";
        document.getElementById("exampleModalLabel").innerHTML = title
        $('#exampleModal').modal("show")
        if (num === 2) {
            let obj = data[index]
            $('#recipient-name').val(obj.role)
            $('#message-text').val(obj.roleRemark)
            updateId = id
            if (obj.state == 1) {
                $('.formInput')[0].checked = true
                $('.formInput')[1].checked = false





























            } else {
                $('.formInput')[0].checked = false
                $('.formInput')[1].checked = true
            }
        }
    }

    //清空方法
    function reset() {
        $('#recipient-name').val('')
        $('#message-text').val('')
        $('.formInput')[0].checked = true
        $('.formInput')[1].checked = false
    }

    //获取当前时间方法
    function getNowFormatDate() {
        let date = new Date();
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    //提交方法
    function submit() {
        let a = $('#recipient-name').val()
        let b = $('#message-text').val()
        if (!a) {
            alert("请输入角色名称")
            return false
        }
        let value
        for (let i = 0; i < $('.formInput').length; i++) {
            if ($('.formInput')[i].checked) {
                value = $('.formInput')[i].value
            }
        }
        if (type == 1) { //新增
            let obj = {
                role: a,
                roleRemark: b,
                createTime: getNowFormatDate(),
                state: value,
                id: data[data.length - 1].id + 1
            }
            data.push(obj)
        } else { //编辑
            data.forEach((item, index) => {
                if (item.id == updateId) {
                    data[index] = {
                        role: a,
                        roleRemark: b,
                        createTime: getNowFormatDate(),
                        state: value,
                        id: updateId
                    }
                }
            })
        }
        let message = type == 1 ? '新增角色成功' : '修改成功'
        addMessage(1, message)
        clearMessage()
        creatData()
        reset()
        $('#exampleModal').modal("hide")
    }

    function addMessage(type, message) {
        /*
            * type=1 成功
            * */
        let messageType = ''
        if (type == 1) messageType = "alert alert-success "
        $('#modal-header').after(
            `<div id="myAlert" class="${messageType}">
            <a href="#" class="close" data-dismiss="alert">×</a>
            <strong>${message}</strong>
            </div>`
        )
    }

    function clearMessage() {
        setTimeout(function () {
            $('#myAlert').remove();
        }, 1000);
    }

    function creatData() {
        // console.log(data)
        document.getElementById("tableTrBox").innerHTML = tableTrBox()

    }

    window.onload = function () {
        document.getElementById("tableThBox").innerHTML = tableThBox()
        creatData()
    }



</script>

</html>